<template>
  <div class="mod-config">
    <basic-container>
        <navigationRenWuShu :sign="{a:false,b:false,c:false,d:false,e:false,f:true}"></navigationRenWuShu>
      <div class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">任务书其他奖惩</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
                <div class="flex">
                    <div>
                        <el-form :model="form"  :inline="true" class="form-inline">
                        <el-form-item label="发约人姓名">
                            <el-input v-model="form.fayueName" placeholder="发约人姓名" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item  v-if="zhiShow==1" label="发约人职务">
                            <el-input v-model="form.fayueZhiwu" placeholder="发约人职务" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="受约人姓名">
                            <el-input v-model="form.shouyueName" placeholder="受约人姓名" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item  v-if="zhiShow==1" label="受约人职务">
                            <el-input v-model="form.shouyueZhiwu" placeholder="受约人职务" style="width: 160px;"></el-input>
                        </el-form-item>

                        <el-form-item  v-if="zhiShow==1" label="签订级别">
                            <el-select :clearable="true" v-model="form.signLevel" placeholder="请选择签订级别"  style="width:100%;"
                                class="xiaLa">
                                <el-option v-for="item in leveList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" class="marginLeft"  @click="getDataList()">检索</el-button>
                        </el-form-item>
                        </el-form>
                    </div>
                </div>
           </div>
        </div>
            <div class="border-top-theme">
                <div class="mt10">
                    任务书
                    <span>
                        <el-radio v-model="radio" label="1">个人</el-radio>
                        <el-radio v-model="radio" label="2">机构</el-radio>
                    </span>
                    <div style="float:right">
                        <el-button v-if="zhiShow==1"  type="primary">任务书加分</el-button>
                        <el-button v-if="zhiShow==1"  @click="editBatch" type="primary">批量编辑#</el-button>
                        <el-button v-if="zhiShow==1"  type="primary">提交奖惩</el-button>
                        <el-button v-if="zhiShow==7" type="primary" @click="dingX">定性指标</el-button>
                        <el-button v-if="zhiShow==6" type="primary" @click="dingL">定量指标</el-button>
                        <el-button v-if="zhiShow==6||zhiShow==7" type="primary" @click="subBatch">批量填报#</el-button>

                    </div>
                </div>
            </div>
            <el-table
              ref="table"
              style="width: 100%;margin-top:20px"
              :data="dataList"
              border
              v-if="zhiShow==1"
              v-loading="dataListLoading">
                <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column prop="workAssignName" label="任务书名称" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column
                  prop="shouyueName"
                  header-align="center"
                  align="center"
                  min-width="120"
                  label="受约人姓名">
                  <template slot-scope="scope">
                    <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)">
                      <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                        <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">...</span></span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
            prop="shouyueZhiwu"
            header-align="center"
            align="center"
            min-width="180"
            label="受约人职务">

            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.shouyueZhiwu).slice(0, 2)">
                <el-tooltip class="item"  :disabled="item.length<8&&cutout(scope.row.shouyueZhiwu).length<3" effect="dark" :content="scope.row.shouyueZhiwu" placement="top-start">
                  <span>{{validatenull(item)?'-':item | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueName"
            header-align="center"
            align="center"
            min-width="120"
            label="发约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.fayueName).slice(0, 2)">
                <el-tooltip :disabled="cutout(scope.row.fayueName).length<3" class="item" effect="dark" :content="scope.row.fayueName" placement="top-start">
                <span>{{item}}<span v-if="cutout(scope.row.fayueName).length>2&&index==1">...</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueZhiwu"
            header-align="center"
            align="center"
            min-width="180"

            label="发约人职务">
            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.fayueZhiwu).slice(0, 2)">
                <el-tooltip class="item" :disabled="item.length<8&&cutout(scope.row.fayueZhiwu).length<3" effect="dark" :content="scope.row.fayueZhiwu" placement="top-start">
                    <span>{{(validatenull(item)?'-':item) | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
                <el-table-column prop="sumZbDf" label="得分" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column label="操作" width="100" header-align="center" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click="editBatch(scope.row.id)">查看编辑#</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <dingXingForm v-if="zhiShow=='6'" :zhiShow='6' :hetongId="hetongId"   @tbTableChild="tbTableChild" ref="tabledx"></dingXingForm>
            <dingLiangForm v-if="zhiShow=='7'" :zhiShow='7' :hetongId="hetongId"  @tbTableChild1="tbTableChild1"  ref="tabledl"></dingLiangForm>
            <div class="avue-crud__pagination">
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                            layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            </div>
      </div>
      <tbDialog :tbDialog='tbDialog' v-if="pltbDialogVisible" @closeDialog="closeDialog"></tbDialog>
    </basic-container>
  </div>
</template>

<script>
import {fetchList, delObj,updateFilling,faqiData,confirmhz} from '@/api/hetongrenwu/gongzuorenwushu/workAssignqtjc'
import tbDialog from '@/views/hetongrenwu/components/tianbao-dialog.vue'
import dingXingForm from '@/views/hetongrenwu/gongzuorenwushu/renwushutb/jghz/dingXing-form.vue'
import dingLiangForm from '@/views/hetongrenwu/gongzuorenwushu/renwushutb/jghz/dingLiang-form.vue'
import { validatenull } from "@/util/validate";
export default {
    components:{
        dingXingForm,
        tbDialog,
        dingLiangForm
    },
    data(){
        return{
            form:{},
            radio:'1',
            radioTwo:1,
            pageIndex:1,
            pageSize: 10,
            totalPage: 0,
            zhiShow:1,
            rwszbForm:{},
            gridData:[
                {
                zhiwu: '经理',
                name: '王小虎',
                status: '退回'
                }
            ],
            leveList:[
                {label:'所属单位部门负责人',value:'1'},
                {label:'本部一般管理人员',value:'2'},
                {label:'所属单位一般管理人员',value:'3'}
            ],
            tbDialog:{},
            searchadvanced: true,
            searchheight: '0',
            dataList:[],
            dataListLoading:false,
            hetongId:Number,
            tbSelect:[],
            tbSelect1:[],
            idsStr:String,
            pltbDialogVisible:false
        }
    },
    watch:{
      radio(value){
        if(value){
          this.getDataList();
        }
      }
    },
    filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
      },
    created() {
      this.getDataList()
    },
    methods:{
        dingX(){
            this.zhiShow=6;
            this.form={};
            this.$nextTick(()=> {
              this.$refs.tabledx.init1(Object.assign(this.form,{radio:this.radio}));
            })
        },
        dingL(){
            this.zhiShow=7;
            this.form={};
            this.$nextTick(()=> {
            this.$refs.tabledl.init(Object.assign(this.form,{radio:this.radio}));
          })
        },
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        //编辑查看
        editBatch(id){
            this.zhiShow=6;
            this.hetongId=id;
        },
        //批量填报
        subBatch(){
            var data=[];
            if(this.zhiShow=='6'){
              data=this.tbSelect;
            }else if(this.zhiShow=='7'){
              data=this.tbSelect1;
            }
            if(data.length==0){
              this.$message.error("请至少选择一个指标！");
              return;
            }
            var ids=[];
            for(var i=0;i<data.length;i++){
              ids.push(data[i].zbId)
            }
            var idsStr=ids.join(',')
            this.pltbDialogVisible=true;
            this.tbDialog={
              dialogVisible:true,
              zhiShow:this.zhiShow,
              idsStr:idsStr
            }
        },
        //子集信息
        zhibiaoChild(zhibiaoChild){
            if(zhibiaoChild){
                this.zhiShow=1

            }
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
      // 获取数据列表
      getDataList() {
        if(this.zhiShow=='6'){
          this.$nextTick(()=>{
            this.$refs.tabledx.init1(Object.assign(this.form,{radio:this.radio}))
          })
          return false
        }
        if(this.zhiShow=='7'){
          this.$nextTick(()=>{
            this.$refs.tabledl.init(Object.assign(this.form,{radio:this.radio}))
          })
          return false
        }
        this.dataListLoading = true
        fetchList(Object.assign({
          type:this.radio,
          fayueName:this.form.fayueName,
          fayueZhiwu:this.form.fayueZhiwu,
          shouyueZhiwu:this.form.shouyueZhiwu,
          signLevel:this.form.signLevel,
          shouyueName:this.form.shouyueName,
          current: this.pageIndex,
          size: this.pageSize,
          workAssignAuditStatus:7,
          contFillStatus:1
        })).then(response => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
      //判空
      validatenull(val){
        return validatenull(val)
      },
      tbTableChild(tbTableChild){
        if(tbTableChild){
          this.tbSelect=tbTableChild
        }
      },
      tbTableChild1(tbTableChild1){
        if(tbTableChild1){
          this.tbSelect1=tbTableChild1
        }
      },
      closeDialog(){
        this.pltbDialogVisible=false;
        this.getDataList();
      },
    }
}
</script>

<style>

</style>
